<template>
	<view class="container home-wrap" :style="{ 'background':'#fff'}">
		<shopro-navbar :isBack="false" :background="{'background':'#fff'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">题库</text>
		</shopro-navbar>
		<view class="u-p-l-20 u-p-r-20">
			<!-- 当前科目选择 -->
			<view class="subject-select">
				<text>当前科目</text>
				<view class="picker u-flex u-flex-items-center" @click="jump('/pages/index/chooseCourse')">
					<view class="picker-btn">{{ examType }}</view>
					<!--<u-icon name="arrow-down" size="20" :color="'#1976ff'"></u-icon>-->
					<view class="picker-btn-down"><image :src="HTTP_IMG_URL()+'/static/images/arrow-down.png'" model="aspectFill"></image></view>
				</view>
			</view>
			<!-- Tab 切换 -->
			<view class="tab-bar">
				<view :class="['tab', activeTab === 1 ? 'active' : '']" @click="getChapter">章节练习</view>
				<view :class="['tab', activeTab === 2 ? 'active' : '']" @click="getPaper">模拟试卷</view>
			</view>
			<!-- 章节练习表格 -->
			<view v-if="activeTab === 1" >
				<view class="table" v-if="chapterList.length>0">
					<view class="table-header">
						<text class="th">章节练习</text>
						<text class="th">已做题数/总题数</text>
						<text class="th">正确率</text>
						<text class="th"></text>
					</view>
					<view v-for="(item, idx) in chapterList" :key="idx" class="table-row">
						<view class="td">
							<view class="u-line-1">{{ item.title }}</view>
						</view>
						<view class="td u-flex u-flex-around u-flex-items-center">
							<view class="line-total">
								<view class="line-num" :style="{'width': (item.last_progress/item.quantity) * 100 + '%' }"></view>
							</view>
							<view class="line-desc u-m-l-6">
								{{ item.last_progress || '0' }}/{{ item.quantity || '0' }}
							</view>
						</view>
						<text class="td u-line-1">
							{{ item.right_rate > 0 ? (item.right_rate + '%') : '—' }}
						</text>
						<view class="td do-btn" :class="item.last_progress > 0 ? (item.last_progress < item.quantity ? 'continue-btn' : 'done-btn') : ''" v-if="item.last_progress > 0 && item.last_progress < item.quantity" @click="handleContinue(item, idx)">继续做题</view>
						<view class="td do-btn" :class="item.last_progress === 0 ? '' : (item.last_progress === item.quantity ? 'done-btn' : '')" v-else @click="handleStart(item, idx)">{{ item.last_progress === item.quantity ? '已完成' : '开始做题' }}</view>
					</view>
				</view>
				<view class="empty u-flex u-flex-column u-flex-center u-flex-items-center" v-else>
					<image :src="HTTP_IMG_URL()+'/static/images/empty.png'"></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
			<view v-else>
				<view class="table" v-if="paperList.length>0">
					<view class="table-header">
						<text class="th">试卷名称</text>
						<text class="th">得分</text>
						<text class="th">正确率</text>
						<text class="th"></text>
					</view>
					<view v-for="(item, idx) in paperList" :key="idx" class="table-row">
						<view class="td">
							<view class="u-line-1">{{ item.title }}</view>
						</view>
						<view class="td">
							<view class="line-desc u-m-l-6">
								{{ item.last_score }}
							</view>
						</view>
						<text class="td u-line-1">
							{{ item.right_rate > 0 ? (item.right_rate + '%') : '—' }}
						</text>
						<view class="td do-btn" :class="item.last_progress > 0 ? (item.last_progress < item.quantity ? 'continue-btn' : 'done-btn') : ''" v-if="item.last_progress > 0 && item.last_progress < item.quantity" @click="handleContinue(item, idx)">继续做题</view>
						<view class="td do-btn" :class="item.last_progress === 0 ? '' : (item.last_progress === item.quantity ? 'done-btn' : '')" v-else @click="handleStart(item, idx)">{{ item.last_progress === item.quantity ? '已完成' : '开始做题' }}</view>
					</view>
				</view>
				<view class="empty u-flex u-flex-column u-flex-center u-flex-items-center" v-else>
					<image :src="HTTP_IMG_URL()+'/static/images/empty.png'"></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
		</view>

		<!-- 自定义弹窗 -->
		<view v-if="showContinueDialog" class="popup-mask">
			<view class="popup-dialog">
				<view class="popup-content">本章节有未完成的做题记录，<br/>是否继续</view>
				<view class="popup-actions">
					<view class="popup-btn" @click="restartAnswer">重新开始</view>
					<view class="popup-btn primary" @click="continueAnswer">继续答题</view>
				</view>
			</view>
		</view>

		<!-- 去购买弹窗 -->
		<view v-if="showBuyDialog" class="popup-mask">
			<view class="popup-dialog">
				<view class="popup-content">
					很抱歉，您还未购买相应课程，<br/>无法查看相关资料哦！
				</view>
				<view class="popup-actions">
					<view class="popup-btn" @click="cancelBuy">取消</view>
					<view class="popup-btn primary" @click="goBuy">去购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import { record } from '@/api'
export default {
	data() {
		return {
			examType: 'CAAC',
			selectedTypeIdx: 0,
			activeTab: 1,
			chapterList: [],
			isPurchased: true, // 是否已购买
			showContinueDialog: false,
			showBuyDialog: false,
			currentChapterIndex: null,
			pendingAction: null, // 'start' or 'continue'
			paperList: [],
			currentPaper: {}
		}
	},
	computed: mapGetters(['isLogin', 'uid', 'userInfo']),
	onShow(){
		const type = uni.getStorageSync('questionnaireType');
		console.log('Received type:', type);
		const examType = wx.getStorageSync('examType');
		console.log(examType, 'uni.getStorageInfoSync');
		if(examType){
			this.examType = examType;
		}
		this.getChapter();
		if(type == "chapter"){
			this.activeTab = 1;
			this.getChapter();
		}
		if(type == "mock"){
			this.activeTab = 2;
			this.getPaper();
		}
		// 使用完后可以清除
		uni.removeStorageSync('questionnaireType');
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		handleStart(item, idx) {
			if (!this.isPurchased) {
				this.showBuyDialog = true;
				this.pendingAction = 'start';
				this.currentChapterIndex = idx;
				return;
			}
			uni.setStorageSync('catId', item.id);
			this.onStartClick(item);
		},
		async getChapter () {
			this.activeTab = 1;
			let type = '';
			if(this.examType === 'CAAC') {
				type = '1';
			} else if(this.examType == 'AOPA'){
				type = '2';
			} else {
				type = '3';
			}
			const res = await record.getCatePaper({
				type: this.activeTab,
				cate_id: type // 1、CAAC 2、AOPA 3、UTC
			}).then((res) => {
				if (res.response.data.code == 1) {
					console.log(res.response.data.data.list.data, 'res.response.data.data.list.data');
					this.chapterList = res.response.data.data.list.data;
				}
			})
		},
		async getPaper () {
			this.activeTab = 2;
			let type = '';
			if(this.examType === 'CAAC') {
				type = '1';
			} else if(this.examType == 'AOPA'){
				type = '2';
			} else {
				type = '3';
			}
			const res = await record.getCatePaper({
				type: this.activeTab,
				cate_id: type // 1、CAAC 2、AOPA 3、UTC
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.paperList = res.response.data.data.list.data;
				}
			})
		},
		handleContinue(item, idx) {
			if (!this.isPurchased) {
				this.showBuyDialog = true;
				this.pendingAction = 'continue';
				this.currentChapterIndex = idx;
				return;
			}
			uni.setStorageSync('catId', item.id);
			this.onContinueClick(item, idx);
		},
		onContinueClick(item, idx) {
			this.currentChapterIndex = idx;
			this.currentPaper = item;
			console.log(this.currentPaper, 'itemitem');
			this.showContinueDialog = true;
		},
		onStartClick(item) {
			// 这里可以写开始做题的跳转逻辑
			uni.navigateTo({
				url:'/pages/questionnaire/zuoti?catId=' + item.id,
			})
		},
		restartAnswer() {
			this.showContinueDialog = false;
			// 这里可以写重新开始的逻辑
			uni.showToast({
				title: '重新开始',
				icon: 'none',
			});
		},
		continueAnswer() {
			this.showContinueDialog = false;
			// 这里可以写继续答题的逻辑
			uni.navigateTo({
				url:'/pages/questionnaire/zuoti?catId=' + this.currentPaper.id,
			})
		},
		// 购买弹窗相关
		cancelBuy() {
			this.showBuyDialog = false;
			this.pendingAction = null;
		},
		goBuy() {
			this.showBuyDialog = false;
			// 这里可以写跳转购买页逻辑
			uni.showToast({
				title: '跳转购买页',
				icon: 'none',
			});
			this.pendingAction = null;
		},
		jump(e) {
			const newValue = uni.getStorageSync('examType');
			uni.navigateTo({
				url: e + '?value=' + newValue
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.container {
		background: #f8f9fb;
		min-height: 100vh;
	}
	.header {
		text-align: center;
		padding: 40rpx 0 20rpx 0;
	}
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	.subject-select {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f6f6f8;
		border-radius: 24rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.label {
			font-size: 28rpx;
			color: #666;
			margin-right: 20rpx;
		}
		.picker {
			color: #1976ff;
		}
		.picker-value {
			color: #3a7afe;
			font-size: 28rpx;
		}
	}

	.tab-bar {
		display: flex;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		.tab {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #202020;
			border-bottom: 4rpx solid transparent;
		}
		.active {
			font-weight: bold;
			position: relative;
			color: #202020;
			font-weight: bold;
			&::after {
				width: 20rpx;
				position: absolute;
				content: "";
				bottom: 0;
				height: 6rpx;
				border-radius: 10rpx;
				background: #1976ff;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	
	.table {
		background: #F6F7FA;
		border-radius: 24rpx;
		margin: 40rpx 0 20rpx;
		overflow:hidden;
	}
	.table-header, .table-row {
		display: flex;
		align-items: center;
		background: #ECF1FA;
	}
	.table-row{
		background:#F6F7FA;
	}
	.table-header {
		font-weight: bold;
		color: #888;
		font-size: 24rpx;
		border-bottom: 4rpx solid #fff;
	}
	.th {
		flex: 2;
		color: #4F73A4;
		padding: 16rpx 0;
		border-right: 4rpx solid #fff;
	}
	.th:first-child{
		text-align: center;
	}
	.th:last-child{
		border-right: 0 solid #fff;
	}
	.th:nth-child(2){
		flex: 2;
		text-align: center;
	}
	.th:nth-child(3) {
		flex: 1;
		text-align: center;
	}
	.th:last-child {
		flex: 1.16;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.td {
		flex: 2;
		font-size: 24rpx;
		color: #333;
		padding: 16rpx 0;
		border-right: 4rpx solid #fff;
	}
	.td:first-child{
		color: #40679B;
		text-indent: 10rpx;
	}
	.td:last-child{
		border-right: 0 solid #fff;
	}
	.td:nth-child(2){
		flex: 2;
		text-align: center;
	}
	.td:nth-child(3) {
		flex: 1;
		text-align: center;
	}
	.td:last-child {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.line-total{
		position: relative;
		width: 80%;
		height: 8rpx;
		border-radius: 14rpx;
		background: #FFFFFF;
	}
	.line-num{
		position: absolute;
		background: #1664FF;
		border-radius: 14rpx;
		height: 8rpx;
		width: 20%;
		left: 0;
	}
	.do-btn {
		padding: 5rpx 0rpx;
		margin: 0 10rpx 0 0;
		font-size: 22rpx;
		border-radius: 24rpx;
		margin-left: 10rpx;
		background:rgba(22,100,255,0.1);
		color: #1664FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.continue-btn{
		background:#fff;
		color: #1664FF!important;
		border:2rpx solid #1664FF;
	}
	.done-btn{
		background: rgba(112, 112, 114, 0.1);
		color: #333;
	}
	.popup-mask {
		position: fixed;
		left: 0; top: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.35);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-dialog {
		background: #fff;
		border-radius: 24rpx;
		width: 80vw;
		max-width: 600rpx;
		padding: 48rpx 0 0 0;
		box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-content {
		font-size: 30rpx;
		color: #222;
		text-align: center;
		margin-bottom: 48rpx;
		line-height: 1.6;
	}
	.popup-actions {
		display: flex;
		width: 100%;
		border-top: 1rpx solid #eee;
	}
	.popup-btn {
		flex: 1;
		text-align: center;
		padding: 28rpx 0;
		font-size: 30rpx;
		color: #222;
		border-right: 1rpx solid #eee;
	}
	.popup-btn:last-child {
		border-right: none;
	}
	.popup-btn.primary {
		color: #1664FF;
		font-weight: bold;
	}
	.picker-btn-down{
		width: 20rpx;
		height: 14rpx;
		margin-left: 18rpx;
		image{
			width: 100%;
			height: 100%;
			margin-bottom: 20rpx ;
		}
	}
	.empty{
		min-height: 50vh;
		image{
			width: 40vw;
			height: 240rpx;
		}
		.empty-text{
			margin-top: 16rpx;
			color: #101010;
			font-size: 24rpx;
			font-weight: bold;
		}
		.empty-desc{
			margin-top: 10rpx;
			color: #474747;
			font-size: 20rpx;
		}
	}
</style>